<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>project</title>
    <script src="jquery\jquery.js"></script>
</head>
<style>
    table{
        text-align: center;     
    }
    #top td{
        /* border-bottom:2px solid black; */
        font-size:20px; 
        font-weight:800px;
    }
</style>
<body>
    <table width="600px" cellpadding="10px" cellspacing="0">
        
        <tr id="top" >
            <td>产品名称</td>
            <td>产地</td>
            <td>厂商</td>    
        </tr>
        <tr>
            <td>爱美电视机</td>
            <td>福州</td>
            <td>爱美电子</td>
        </tr>
        <tr>
            <td>美好微波炉</td>
            <td>北京</td>
            <td>美好集团</td>
        </tr>
        <tr>
            <td>联想电脑</td>
            <td>沈阳</td>
            <td>联想集团</td>
        </tr>
        <tr>
            <td>编程词典</td>
            <td>长春</td>
            <td>明日科技</td>
        </tr>
        <tr>
            <td>编程词典</td>
            <td>长春</td>
            <td></td>
        </tr>
        <tr>
            <td><p>编程词典</p></td>
            <td>长春</td>
            <td></td>
        </tr>
    </table>
    <script>
        $(document).ready(function(){
            $("tr:odd").css("backgroundColor", "yellow");//奇数行
            $("tr:even:gt(0)").css("backgroundColor", "pink");//偶数行(去掉第一行)【gt(0)：大于0】
            //$("tr:even:not(:first)").css("backgroundColor", "pink");//
            //$("tr:eq(0)").css("backgroundColor", "white");//
            $('#top>td').css('borderBottom', '2px solid black');
            // $('#top>td').css('border-Bottom', '1px solid black');
            // $('#top').css('color', 'red');
            // $("table").css("borderColor", "black");
            
            //移动变色
            var color;
            $("tr:gt(0)").hover(function(){ 
                color = $(this).css("backgroundColor");
                $(this).css("backgroundColor","#00aa00");
            },function(){
                $(this).css("backgroundColor",color);
            })

            //点击事件
            $("tr").click(function(){
                $(this).css("background","#00ff00")
            })

            //选择器（过滤）
            $("td:empty").css("background","#00cc00") //空的
            $("tr:eq(3):parent").css("background","#0000ff") //非空
            td:has(p) //有p标签和单元格 （放选择器）
            td:contains("长春").css //包含长春的单元格 （只能放文本）
            td:visible //所有可见的

        });
    </script>
</body>
</html>